<template>
	<view class="wrap">
		<view class="citem" v-for="item of materialList" :key="item">
			<view class="cileft">
				<image class="ciimg" src="../../static/case/fire.png" mode=""></image>
			</view>
			<view class="ciright">
				<view class="cirtop">
					<view class="">
						{{item.materialName}}
					</view>
				</view>
				<view class="cirbottom1">
					<view class="cir1left">
						<image class="cirimage" src="../../static/emoji/8.gif" mode=""></image>
						<view class="">
							{{item.creator}}
						</view>
					</view>
					<view class="cir1right">
						{{item.createTime}}
					</view>
				</view>

				<view class="cirbottom2">
					<view class="xieban" @click="openFile(item)">
						<image src="../../static/case/openfire.png" mode=""></image>
						打开
					</view>
					<view class="edit" @click="editCase">
						<image src="../../static/case/share.png" mode=""></image>
						分享
					</view>
					<view class="delete" @click="sharewxCase">
						<image src="../../static/case/sharewx.png" mode=""></image>
						微信
					</view>
				</view>
			</view>

		</view>
		<uni-popup ref="inputDialog" type="dialog">
			<uni-popup-dialog ref="inputClose" title="音频" @confirm="dialogInputConfirm">
				<audio v-show="audioStatus" :src="audioUrl" controls></audio>
			</uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		props: {
			editId: {
				type: String,
				default: ''
			},
			isUpdateFileList: {
				type: Boolean,
				default: false
			}
		},
		watch: {
  		  editId: {
  		    handler(newValue) {
				console.log('newValue==============>', newValue);
				if (newValue) {
				  this.getCaseMaterialList(newValue);
				}
  		    },
  		    immediate: true,
  		  },
			isUpdateFileList: {
				handler(newValue) {
					if (newValue) {
						this.getCaseMaterialList(this.editId);
					}
				}
			}
  		},
		data() {
			return {
				materialList: [],
				audioUrl: '',
				audioStatus: false,
			}
		},
		methods: {
			dialogInputConfirm() {
				this.$refs.inputDialog.close();
			},
			getCaseMaterialList(editId) {
				this.$httpRequest({
					url: `/case/casematerialList/${editId}`,
					method: 'GET',
				}).then(res => {
					console.log('casematerialList==============>', res);
					this.materialList = res.data;
				})
			},
			sharewxCase() {

			},
			editCase() {

			},
			clickRight() {
				uni.navigateTo({
					url: '/pages/group/case-edit',
				});
			},
			openFile(item) {
				console.log('item==============>', item);
				if(item.mateType == 7) {
					this.audioUrl = item.url;
					this.audioStatus = true;
					this.$refs.inputDialog.open();
				}else if(item.mateType == 6) {
					uni.previewImage({
      				  urls: [item.url] // 需要预览的图片http链接列表
      				});
				}else {
					uni.navigateTo({
						url: "/pages/group/fileView",
						success: (res) => {
							// 通过eventChannel向被打开页面传送数据
							res.eventChannel.emit("dataFun", {
								data: {
									name: item.materialName,
									fileSrc: item.url,
									isFileDown: false
								},
							});
						},
					});
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		width: 100%;
		height: 100%;
		margin-top: 20rpx;
	}

	.citem {
		background-color: #fff;
		border: 1px solid rgb(234, 239, 244);
		display: flex;

		.cileft {
			flex: 1;
			position: relative;

			.ciimg {
				position: absolute;
				right: 20rpx;
				top: 40rpx;
				width: 50rpx;
				height: 50rpx;
			}
		}

		.ciright {
			flex: 5;

			.cirtop {
				height: 90rpx;
				display: flex;
				align-items: center;

				& view {
					flex: 1;
					display: flex;
					font-size: 30rpx;
				}

			}

			.cirbottom1 {
				height: 60rpx;
				font-size: 26rpx;
				display: flex;
				justify-content: space-between;
				align-items: flex-start;

				.cir1left {
					flex: 1;
					display: flex;
					align-items: flex-start;
					height: 100%;
				}

				.cir1right {
					margin-right: 20rpx;
				}

				.cirimage {
					height: 30rpx;
					width: 30rpx;
					border-radius: 50%;
					margin-right: 10rpx;
				}
			}

			.cirbottom2 {
				font-size: 26rpx;
				display: flex;
				justify-content: flex-end;

				.xieban,
				.edit,
				.delete {
					background-color: rgb(238, 243, 247);
					padding: 5rpx 10px;
					margin: 20rpx 20rpx;
					border-radius: 10rpx;
				}

				& image {
					width: 20rpx;
					height: 20rpx;
				}
			}
		}

	}
</style>